<template>
  <div id="components-layout-demo-basic">
    <a-layout>
      <a-layout-header style="height: 200px;"></a-layout-header>
      <p
        style="
          font-size: 36px;
          background-color: white;
          margin-bottom: 0px;
          text-align: center;
        "
      >
        {{ systemName }}
      </p>
      <p style="background-color: white; margin-bottom: 0px; height: 48px"></p>
      <a-layout>
        <a-layout-sider width="35%"> </a-layout-sider>
        <a-layout-content>
          <a-alert
            v-if="usernameOrPasswordError"
            message="用户名或密码错误"
            type="error"
            closable
            :after-close="handleClose"
            style="margin-bottom: 24px"
          />
          <a-form
            layout="vertical"
            :model="formInline"
            :rules="rules"
            @submit="handleSubmit"
            @submit.prevent
          >
            <a-form-item name="username">
              <a-input
                size="large"
                v-model:value="formInline.username"
                placeholder="用户名"
              >
                <template v-slot:prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item name="password">
              <a-input
                size="large"
                v-model:value="formInline.password"
                type="password"
                placeholder="密&nbsp;&nbsp;&nbsp;&nbsp;码"
              >
                <template v-slot:prefix>
                  <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button size="large" type="primary" html-type="submit" block>
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </a-layout-content>
        <a-layout-sider width="35%"></a-layout-sider>
      </a-layout>
      <a-layout-footer></a-layout-footer>
    </a-layout>
  </div>
</template>
<script>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import Axios from "axios";

Axios.defaults.baseURL = "/api";

export default {
  name: "Login",
  emits: ["login-success"],
  props: ["systemName"],
  components: {
    UserOutlined,
    LockOutlined,
  },
  data() {
    // let checkUsername = async (rule, value) => {
    //   if (value === '') {
    //     return Promise.reject('请输入用户名')
    //   }
    // }
    // let checkPassword = async (rule, value) => {
    //   if (value === '') {
    //     return Promise.reject('请输入密码')
    //   }
    // }
    // let validatePass = async (rule, value) => {
    //   if (value === '') {
    //     return Promise.reject('Please input the password')
    //   } else {
    //     if (this.ruleForm.checkPass !== '') {
    //       this.$refs.ruleForm.validateField('checkPass')
    //     }
    //     return Promise.resolve()
    //   }
    // }
    // let validatePass2 = async (rule, value, callback) => {
    //   if (value === '') {
    //     return Promise.reject('Please input the password again')
    //   } else if (value !== this.ruleForm.pass) {
    //     return Promise.reject("Two inputs don't match!")
    //   } else {
    //     return Promise.resolve()
    //   }
    // }
    return {
      usernameOrPasswordError: false,
      formInline: {
        username: "",
        password: "",
      },
      rules: {
        // username: [{ validator: checkUsername, trigger: 'change' }],
        // password: [{ validator: checkPassword, trigger: 'change' }],
        username: [
          { required: true, message: "请输入用户名", whitespace: true },
        ],
        password: [{ required: true, message: "请输入密码", whitespace: true }],
      },
    };
  },
  methods: {
    handleSubmit() {
      if (this.formInline.username === "") {
        return;
      }
      if (this.formInline.password === "") {
        return;
      }
      Axios.post("/login/", this.formInline)
        .then((res) => {
          // console.log("登录成功！");
          this.usernameOrPasswordError = false;
          this.$emit("login-success", res);
          // console.log(res)
        })
        .catch((error) => {
          // console.log("登录失败！");
          this.usernameOrPasswordError = true;
          console.log("Error", error.message);
        });
      // console.log(this.formInline);
    },
    // 关闭登录失败时的提示框
    handleClose() {
      this.usernameOrPasswordError = false;
    },
  },
};
</script>

<style scoped>
/* #components-layout-demo-basic {
  text-align: center;
} */

/*.icons-list ::v-deep(.anticon) {*/
/*  margin-right: 6px;*/
/*  font-size: 48px;*/
/*  color: black;*/
/*}*/

#components-layout-demo-basic .ant-layout-header {
  background: #ffffff;
  color: #fff;
}

#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
  background: #ffffff;
  color: #fff;
}

#components-layout-demo-basic .ant-layout-sider {
  background: #ffffff;
  color: #fff;
  line-height: 240px;
}

#components-layout-demo-basic .ant-layout-content {
  background: #ffffff;
  color: #fff;
  min-height: 240px;
  line-height: 240px;
}

#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}

#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
</style>
